<template>
    <div>
        <p class="cart-item--title is-inline">{{cartItem.title}}</p>
        <div class="is-pulled-right">
            <i class="fa fa-arrow-circle-up cart-item--modify" @click="addCartItem(cartItem)"></i>
            <i class="fa fa-arrow-circle-down cart-item--modify" @click="removeCartItem(cartItem)"></i>
        </div>
        <div class="cart-item--content">
            <span class="cart-item--price has-text-primary has-text-weight-bold">
                {{cartItem.price}}$ each
            </span>
            <span class="cart-item--quantity has-text-gray is-pulled-right">
                Quantity: {{cartItem.quantity}}
            </span>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator"
import {Cart} from "@/model/Cart";
import {cartStore} from "@/store/cart/CartStore";


@Component({})
export default class CartListItem extends Vue {
    name = "CartListItem"
    @Prop()
    cartItem!:Cart

    private addCartItem(cartItem:Cart){
        cartStore.addCartItem(cartItem);
    }
    private removeCartItem(cartItem:Cart){
        cartStore.removeCartItem(cartItem);
    }
}
</script>

<style scoped>
.cart-item--modify {
    cursor: pointer;
    margin: 0 1px;
}
</style>
